<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        body {
            background: #333;
        }

        h1 {
            text-align: center;
            color: #fff;
        }

        .timezone {
            width: 6px;
            height: 900px;
            background: lightblue;
            margin: 0 auto;
            margin-top: 50px;
            border-radius: 3px;
            position: relative;
            -webkit-animation: heightSlide 2s linear;
        }

        @-webkit-keyframes heightSlide {
            0% {
                height: 0;
            }

            100% {
                height: 350px;
            }
        }

        .timezone:after {
            content: '未完待续...';
            width: 100px;
            color: #fff;
            position: absolute;
            margin-left: -35px;
            bottom: -30px;
            -webkit-animation: showIn 4s ease;
        }

        .timezone .time,
        .timezone .timeLeft {
            position: absolute;
            margin-left: -10px;
            margin-top: -10px;
            width: 20px;
            height: 20px;
            border-radius: 50%;
            border: 4px solid rgba(255, 255, 255, 0.5);
            background: lightblue;
            -webkit-transition: all 0.5s;
            -webkit-animation: showIn ease;
        }

        .timezone .time:nth-child(1) {
            -webkit-animation-duration: 1s;
        }

        .timezone .timeLeft:nth-child(2) {
            -webkit-animation-duration: 1.5s;
        }

        .timezone .time:nth-child(3) {
            -webkit-animation-duration: 2s;
        }

        .timezone .timeLeft:nth-child(4) {
            -webkit-animation-duration: 2.5s;
        }

        @-webkit-keyframes showIn {

            0%,
            70% {
                opacity: 0;
            }

            100% {
                opacity: 1;
            }
        }

        .timezone .time h2,
        .timezone .timeLeft h2 {
            position: absolute;
            margin-left: -120px;
            margin-top: 3px;
            color: #eee;
            font-size: 14px;
            cursor: pointer;
            -webkit-animation: showIn 3s ease;
        }

        .timezone .timeLeft h2 {
            margin-left: 60px;
            width: 100px;
        }

        .timezone .time:hover,
        .timezone .timeLeft:hover {
            border: 4px solid lightblue;
            background: lemonchiffon;
            box-shadow: 0 0 2px 2px rgba(255, 255, 255, 0.4);
        }

        .timezone .time div,
        .timezone .timeLeft div {
            position: absolute;
            top: 50%;
            margin-top: -25px;
            left: 50px;
            width: 300px;
            height: 50px;
            background: lightblue;
            border: 3px solid #eee;
            border-radius: 10px;
            z-index: 2;
            overflow: hidden;
            cursor: pointer;
            -webkit-animation: showIn 3s ease;
            -webkit-transition: all 0.5s;
        }

        .timezone .timeLeft div {
            left: -337px;
        }

        .timezone .time div:hover,
        .timezone .timeLeft div:hover {
            height: 170px;
        }

        .timezone .time div p,
        .timezone .timeLeft div p {
            color: #fff;
            font-weight: bold;
            text-align: center;
        }

        .timezone .time:before,
        .timezone .timeLeft:before {
            content: '';
            position: absolute;
            top: 0px;
            left: 32px;
            width: 0px;
            height: 0px;
            border: 10px solid transparent;
            border-right: 10px solid #eee;
            z-index: -1;
            -webkit-animation: showIn 3s ease;
        }

        .timezone .timeLeft:before {
            left: -33px;
            border: 10px solid transparent;
            border-left: 10px solid #eee;
        }

        .timezone .time div ul,
        .timezone .timeLeft div ul {
            list-style: none;
            width: 300px;
            padding: 5px 0 0;
            border-top: 2px solid #eee;
            color: #fff;
            text-align: center;
        }

        .timezone .time div li,
        .timezone .timeLeft div li {
            display: inline-block;
            height: 25px;
            line-height: 25px;
        }
    </style>
</head>

<body>
    <div class="timezone">
        <div class="time">
            <h2>2015-07-02</h2>
            <div>
                <p>暴走大事件第一季</p>
                <ul>
                    01---什么是html5?
                    02---新增常用标签
                    03---新增input type属性值-pc端
                </ul>
            </div>
        </div>
        <div class="timeLeft" style="top: 100px;">
            <h2>2015-08-02</h2>
            <div>
                <p>暴走大事件第二季</p>
                <ul>
                    04---mac系统的电脑和苹果手机如何做真机测试
                    05---windows系统的电脑和苹果手机如何做真机测试
                    06---连接和安装，安卓手机真机测试
                    07---新增input type属性值-移动端
                    08---新增常用属性 input的
                    09---视频音频
                    10---本地存储
                    11---案例-app最近搜索记录
                </ul>
            </div>
        </div>
        <div class="time" style="top:200px;">
            <h2>2015-09-02</h2>
            <div>
                <p>暴走大事件第三季</p>
                <ul>
                    12---reset和Narmalize
                    13---css预处理器
                    14---less的语法格式
                    15---sass语法
                    16---css3选择器兼容
                </ul>
            </div>
        </div>
        <div class="timeLeft" style="top: 300px;">
            <h2>2015-10-02</h2>
            <div>
                <p>暴走大事件第四季</p>
                <ul>
                    17---flex-direction
                    18---flex-wrap
                    19---flex-flow
                    20---justify-content
                    21---align-items
                    22---flex-grow
                    23---flex-shrink
                    24---flex-shrink
                    25---flex-basis
                    23---flex
                </ul>
            </div>
        </div>
        <div class="time" style="top:400px;">
            <h2>2015-09-02</h2>
            <div>
                <p>暴走大事件第五季</p>
                <ul>
                    43--响应式布局
                    44--响应式图片
                    45--改造一个响应式网站
                    46--网站响应式和自适应
                </ul>
            </div>
        </div>
        <div class="timeLeft" style="top:500px;">
            <h2>2015-10-02</h2>
            <div>
                <p>暴走大事件第六季</p>
                <ul>
                    43--响应式布局
                    44--响应式图片
                    45--改造一个响应式网站
                    46--网站响应式和自适应
                </ul>
            </div>
        </div>
        <div class="time" style="top:600px;">
            <h2>2015-09-02</h2>
            <div>
                <p>暴走大事件第七季</p>
                <ul>
                    35---animation基础是用
                    36---animation加载中动画
                    37---animation球形加载中
                    38--animate动画库
                    39--transition
                    40--transition翻转菜单
                    41--面试题无宽高的元素如何垂直居中
                    42--动起来的input
                </ul>
            </div>
        </div>
        <div class="timeLeft" style="top:700px;">
            <h2>2015-10-02</h2>
            <div>
                <p>暴走大事件第八季</p>
                <ul>
                    33---transform-2D
                    34---transform-3D
                </ul>
            </div>
        </div>
        <div class="time" style="top:800px;">
            <h2>2015-09-02</h2>
            <div>
                <p>暴走大事件第九季</p>
                <ul>
                    26---布局单位
                    27---自适应布局
                    28---字体图标的使用
                    29---网页规划和头部
                    30---底部布局
                    31---中间区块
                    32---作业
                </ul>
            </div>
        </div>
        <div class="timeLeft" style="top: 900px;">
            <h2>2015-10-02</h2>
            <div>
                <p>暴走大事件第十季</p>
                <ul>
                    17---flex-direction
                    18---flex-wrap
                    19---flex-flow
                    20---justify-content
                    21---align-items
                    22---flex-grow
                    23---flex-shrink
                    24---flex-shrink
                    25---flex-basis
                    23---flex
                </ul>
            </div>
        </div>
    </div>
</body>

</html>